<template>
  <div class="list">
    <div class="add-list">
      <span>收货人姓名<b class="red">*</b>：</span>
      <input type="text" v-model="save.myName" maxlength="8" class="add-input">
    </div>

    <div class="add-list">
      <span>手机号<b class="red">*</b>：</span>
      <input type="text" v-model="save.myPhone"  maxlength="11" class="add-input"
      onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
      onafterpaste="this.value=this.value.replace(/[^\d]/g,'') ">
    </div>

    <div class="add-list">
      <span>省<b class="red">*</b>：</span>
      <input type="text" v-model="save.province" maxlength="8" class="add-input">
    </div>

    <div class="add-list">
      <span>城市<b class="red">*</b>：</span>
      <input type="text" v-model="save.cities" maxlength="8" class="add-input">
    </div>

    <div class="add-list">
      <span>区<b class="red">*</b>：</span>
      <input type="text" v-model="save.area" maxlength="8" class="add-input">
    </div>

    <div class="add-list">
      <span>街道：</span>
      <input type="text" v-model="save.street" class="add-input">
    </div>

    <div class="add-list">
      <span>详细地址<b class="red">*</b>：</span>
      <input type="text" v-model="save.addressContent" >
    </div>

    <div class="add-list">
      <span>邮编：</span>
      <input type="text" v-model="save.postcode" class="add-input"  maxlength="6"
      onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
      onafterpaste="this.value=this.value.replace(/[^\d]/g,'') ">
    </div>
  </div>
  <div class="address" @click="demand">
    <div class="address-bt">
      <button type="button"><span>保存</span></button>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        id: this.$route.query.id,
        saveTips: {
          myName: "收货人姓名",
          myPhone: "手机号",
          province: "省",
          cities: "城市",
          area: "区",
          addressContent: "详细地址"
        },
        save: {
          myName: "",
          myPhone: "",
          province: "",
          address: "",
          area: "",
          street: "",
          cities: "",
          addressContent: "",
          postcode: ""
        }
      };
    },
    methods: {
      async demand() {
        for (let k in this.saveTips) {
          if (!this.save[k]) {
            alert('请填写' + this.saveTips[k]);
            return;
          }
        }
        let obj = {
          openid: this.$root.openId,
          contact: this.save.myName,
          contactPhone: this.save.myPhone,
          province: this.save.province,
          city: this.save.cities,
          area: this.save.area,
          street: this.save.street,
          address: this.save.addressContent,
          zipCode: this.save.postcode,
          isDefault: "1"
        };
        if (this.id) {
          obj.id = this.id;
          await AJAX.updataSend(obj);
        } else {
          await AJAX.addressSend(obj);
        }
        this.$route.router.go('/buy-address');
      },
      async defaultSend (id) {
        let getData = await AJAX.getSendById(id);
        this.save = {
          myName: getData.contact,
          myPhone: getData.contactPhone,
          province: getData.province,
          street: getData.street,
          area: getData.area,
          cities: getData.city,
          addressContent: getData.address,
          postcode: getData.zipCode
        };
      }
    },
    ready() {
      if (this.id) {
        this.defaultSend(this.id);
      }
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .list{
    background-color: #fff;
    margin-bottom: 10rem;
    color:#404040;
    font-size: .7rem;
    line-height: 1.5rem;
    .add-list{
      padding:.5rem .3rem;
      border-bottom: 1px solid #e6e6e6;
      span{
        display: inline-block;
        width:30%;
      }
      .add-input{
        display: inline-block;
        width:60%;
      }
    }
  }

  .address{
    position: fixed;
    bottom: 0;
    width:100%;
    height:3rem;
    background-color: #fff;
    .address-bt button{
      position: fixed;
      bottom: 0;
      padding: .5rem 0;
      width:90%;
      margin-left:5%;
      margin-bottom: .5rem;
      border-radius: .3rem;
      background-color: #15A1D6;
      text-align: center;
      color:#fff;
    }
  }
  .red{
    color: red;
  }
</style>
